<template>
    <el-row>
        <el-col style="height: 500px; display: flex; justify-content: center; align-items: center">
            <el-card class="box-card">
                <div class="header-center">
                    <span>修改密码</span>
                </div>
                <div class="card-body">
                    <el-form
                        v-if="highPass"
                        label-width="80px"
                        :rules="rules"
                        ref="changePasswordForm"
                        :model="password"
                    >
                        <el-form-item
                            label="原密码"
                            prop="oldOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.oldOne"
                                placeholder="请输入原密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="新密码"
                            prop="newOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.newOne"
                                placeholder="请输入新密码(至少8位由数字、小写字母、大写字母组合)"
                                @input="newPassword"
                            ></el-input>
                        </el-form-item>
                        <div class="passwordTipsbox">
                            <div class="passwordTips">
                                <div>密码强度:</div>
                                <p v-bind:class="{ lovercase_valid: newOne_lovercase }"></p>
                                <p v-bind:class="{ number_valid: newOne_number }"></p>
                                <p v-bind:class="{ uppercase_valid: newOne_uppercase }"></p>
                                <el-badge
                                    :value="new_password_length"
                                    class="item"
                                    type="primary"
                                    style="margin-left:20px;"
                                ></el-badge>
                            </div>
                            <i
                                v-show="new_valid_password_length"
                                class="el-icon-success"
                            ></i>
                        </div>
                        <el-form-item
                            label="确认密码"
                            prop="check"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.check"
                                placeholder="请确认新密码(至少8位由数字、小写字母、大写字母组合)"
                                @input="checkPassword"
                            ></el-input>
                        </el-form-item>
                        <div class="passwordTipsbox">
                            <div class="passwordTips">
                                <div>密码强度:</div>
                                <p v-bind:class="{ lovercase_valid: check_lovercase }"></p>
                                <p v-bind:class="{ number_valid: check_number }"></p>
                                <p v-bind:class="{ uppercase_valid: check_uppercase }"></p>
                                <el-badge
                                    :value="check_password_length"
                                    class="item"
                                    type="primary"
                                    style="margin-left:20px;"
                                ></el-badge>
                            </div>
                            <i
                                v-show="check_valid_password_length"
                                class="el-icon-success"
                            ></i>
                        </div>
                    </el-form>
                    <el-form
                        v-else
                        label-width="80px"
                        :rules="rules"
                        ref="changePasswordForm"
                        :model="password"
                    >
                        <el-form-item
                            label="原密码"
                            prop="oldOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.oldOne"
                                placeholder="请输入原密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="新密码"
                            prop="newOne"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.newOne"
                                placeholder="请输入新密码"
                                @input="newPassword"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="确认密码"
                            prop="check"
                        >
                            <el-input
                                size="mini"
                                type="password"
                                v-model="password.check"
                                placeholder="请确认新密码"
                                @input="checkPassword"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-col class="operate">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="sureToChange"
                            >保 存</el-button>
                            <el-button
                                size="mini"
                                @click="cancel"
                            >返 回</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'ChangePassword',

    data() {
        const checkOldPassWord = (rule, value, callback) => {
            console.log('value', value);
            if (!value) {
                callback(new Error(' '));
                this.$message('请验证原密码');
            } else {
                callback();
            }
        };
        const checkNewPassWord = (rule, value, callback) => {
            if (!value) {
                callback(new Error(' '));
                this.$message('请输入新密码');
            } else if (value === this.password.oldOne) {
                callback(new Error(' '));
                this.$message('新密码不可与原密码相同');
            } else {
                callback();
            }
        };
        const checkNewPassWordSame = (rule, value, callback) => {
            if (!value) {
                callback(new Error(' '));
            } else if (value === this.password.newOne) {
                callback();
            } else {
                callback(new Error(' '));
            }
        };
        return {
            highPass: false,
            new_password_length: 0,
            newOne_lovercase: false,
            newOne_number: false,
            newOne_uppercase: false,
            new_valid_password_length: false,
            check_password_length: 0,
            check_lovercase: false,
            check_number: false,
            check_uppercase: false,
            check_valid_password_length: false,
            password: {
                oldOne: '',
                newOne: '',
                check: '',
            },

            rules: {
                oldOne: [
                    {
                        required: true,
                        validator: checkOldPassWord,
                        trigger: 'blur',
                    },
                ],
                newOne: [
                    {
                        required: true,
                        validator: checkNewPassWord,
                        trigger: 'blur',
                    },
                ],
                check: [
                    {
                        required: true,
                        validator: checkNewPassWordSame,
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    async mounted() {
        // 请求机构详细信息拿到是否开启密码强度的状态
        const { state } = this.$store;
        let res;
        res = await this.$axios({
            // 详见 axios 请求配置项
            method: 'GET',
            url: `/PROXY-Remote/institutions/${state.institution.id}`,
        });
        if (res && res.data.code === 200) {
            this.highPass =
                res.data.data.passwordStrength == 'true' ? true : false;
        }
    },
    methods: {
        cancel() {
            this.$router.back();
        },
        newPassword() {
            let re = new Array();
            re[0] = /[a-z]/;
            re[1] = /\d/;
            re[2] = /[A-Z]/;
            let sec = 0;
            for (let i = 0; i < re.length; i++) {
                if (this.password.newOne.match(re[i])) {
                    sec++;
                }
            }
            if (sec == 1) {
                this.newOne_lovercase = true;
                this.newOne_number = false;
                this.newOne_uppercase = false;
            } else if (sec == 2) {
                this.newOne_lovercase = true;
                this.newOne_number = true;
                this.newOne_uppercase = false;
            } else if (sec == 3) {
                this.newOne_lovercase = true;
                this.newOne_number = true;
                this.newOne_uppercase = true;
            } else {
                this.newOne_lovercase = false;
                this.newOne_number = false;
                this.newOne_uppercase = false;
            }
            let resgx = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            this.new_password_length = this.password.newOne.length;
            if (
                this.newOne_lovercase &&
                this.newOne_number &&
                this.newOne_uppercase &&
                this.password.newOne.length >= 8
            ) {
                this.new_valid_password_length = true;
            } else {
                this.new_valid_password_length = false;
            }
        },
        checkPassword() {
            let re = new Array();
            re[0] = /[a-z]/;
            re[1] = /\d/;
            re[2] = /[A-Z]/;
            let sec = 0;
            for (let i = 0; i < re.length; i++) {
                if (this.password.check.match(re[i])) {
                    sec++;
                }
            }
            if (sec == 1) {
                this.check_lovercase = true;
                this.check_number = false;
                this.check_uppercase = false;
            } else if (sec == 2) {
                this.check_lovercase = true;
                this.check_number = true;
                this.check_uppercase = false;
            } else if (sec == 3) {
                this.check_lovercase = true;
                this.check_number = true;
                this.check_uppercase = true;
            } else {
                this.check_lovercase = false;
                this.check_number = false;
                this.check_uppercase = false;
            }
            this.check_password_length = this.password.check.length;
            if (this.password.newOne == this.password.check) {
                this.check_valid_password_length = true;
            } else {
                this.check_valid_password_length = false;
            }
        },
        sureToChange() {
            let re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            console.log(re.test(this.password.newOne));
            if (!re.test(this.password.newOne) && this.highPass) {
                this.$message.info(
                    '密码至少包含大写字母，小写字母，数字，且不少于8位'
                );
                return;
            }
            this.$refs.changePasswordForm.validate((valid) => {
                console.log('验证结果', valid);
                if (valid) {
                    // console.log(this.password);
                    this.$confirm(
                        '该项操作将更改用户登录密码, 是否继续?',
                        '提示',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    )
                        .then(() => {
                            try {
                                this.$axios({
                                    method: 'put',
                                    url:
                                        '/PROXY-Remote/change-password?' +
                                        `newPassword=${this.password.newOne}&oldPassword=${this.password.oldOne}`,
                                    data: '',
                                    headers: {
                                        'Content-Type': 'application/json',
                                    },
                                }).then(
                                    (res) => {
                                        if (res && res.data.code === 200) {
                                            this.$router.push('/login');
                                            this.$message.success('更新成功');
                                        }
                                    },
                                    (err) => {
                                        this.$message.info(
                                            `更新失败  ${err.response.data.message}`
                                        );
                                    }
                                );
                            } catch (e) {
                                this.$message.info(`请求失败  ${e}`);
                            }
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消',
                            });
                        });
                } else {
                    if (!this.password.oldOne) {
                        this.$message('请输入原密码');
                    } else {
                        if (!this.password.newOne) {
                            this.$message('请输入新密码');
                        } else if (
                            this.password.oldOne === this.password.newOne
                        ) {
                            this.$message('新密码不可与原密码相同');
                        } else if (!this.password.check) {
                            this.$message('请确认新密码');
                        } else if (
                            this.password.newOne !== this.password.check
                        ) {
                            this.$message(
                                '确认密码与新密码输入不一致，请重新输入'
                            );
                        }
                    }
                    return false;
                }
                return null;
            });
        },
    },
};
</script>

<style scoped>
.box-card {
    width: 600px;
}
.header-center {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.card-body {
    padding: 20px;
}
.operate {
    display: flex;
    justify-content: center;
    align-items: center;
}
.operate .el-button + .el-button {
    margin-left: 40px;
}
.passwordTipsbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.passwordTips {
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: space-around;
}
.passwordTips div {
    margin-left: 20px;
}
.passwordTips p {
    background-color: #fff;
    width: 50px;
    height: 5px;
    border: 1px solid #10a1df;
    text-align: center;
    margin-left: 2px;
}
.passwordTips p:nth-child(1) {
    margin-left: 10px;
}
.passwordTipsbox i {
    height: 20px;
    color: #67c23a;
}
.passwordTips .lovercase_valid {
    background-color: #67c23a;
}
.passwordTips .number_valid {
    background-color: #67c23a;
}
.passwordTips .uppercase_valid {
    background-color: #67c23a;
}
</style>
